<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>18.15 交叉轴方向 排列方式</title>
		<style>
			
			  * { box-sizing: border-box; }
			
			  .parent {
			    display: flex;
			    align-items: flex-end; /* 向头部对齐*/
			    width: 400px;
			    border: 3px dashed #ccc;
			  }
			
			  .child {
			    width: 100px;
			    padding: 10px;
			    border: solid #000;
			  }
		</style>
	</head>
	<body>
		
		<div class="parent">
		  <div class="child">A
		    <p>a1</p>
		    <p>a2</p>
		    <p>a3</p>
		    <p>a4</p>
		  </div>
		  <div class="child">B
		    <p>b1</p>
		  </div>
		  <div class="child">C
		    <p>c1</p>
		    <p>c2</p>
		  </div>
		  <div class="child">D
		    <p>d1</p>
		    <p>d2</p>
		    <p>d3</p>
		  </div>
		</div>



	</body>
</html>